<template>
	<view class="pages">
		<view style="width: 100%;height: var(--status-bar-height)"></view>
		<view :class="isWhite?'active_top_nav top_nav':'top_nav' ">
			<view class="nav_title">
				<view class="left">
					<uni-icons @click="back" type="back" color="#333" size="25"></uni-icons>
				</view>
				<view class="right">
					<view class="left" @click="cartCollect">
						<uni-icons v-show="!isLike" type="heart" color="#333" size="25"></uni-icons>
						<uni-icons v-show="isLike" type="heart" color="red" size="25"></uni-icons>
					</view>
				</view>
			</view>
			<!-- tab导航 -->
			<view class="nav_types" v-show="isTitle">
				<view @click="changeTitle(item.id)"
					:class="activeTitle==item.id?'active_types_item types_item':' types_item'"
					v-for="item in titleList">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="photos">
			<swiper :current="thisCurrent" @change='changeCurrent'>
				<swiper-item class="swiper_item" v-for="(item,index) in swiperImg" style="display: flex;justify-content: center;align-items: center;">
					<image :src="item" style="width: 80%;height: 80%;"></image>
				</swiper-item>
			</swiper>
			<view class="description">{{activeName}}</view>
			<view class="photo_bottom">
				<view class="photo_numbers">{{thisCurrent+1}}/{{swiperImg.length}}</view>
			</view>
			<!-- 规格 -->
			<!-- <view class="goods_type" v-for="item in spec">
				<view class="typ_name">{{item.spec_name}}: </view>
				<view class="out_type" v-for="items in item.clild">
					<view @click="changeType(items)"
						:class="activeType==items.spec_value_id?'active_type_item goods_type_item':'goods_type_item'">
						<image :src="items.image" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="name"><text>{{items.spec_value}}</text></view>
				</view>
			</view> -->
		</view>
		<view class="message_content">
			<view class="price_detail">
				<view class="left">￥<text style="font-size: 50rpx;">{{dataList.price}}</text>
				</view>
				<view class="right">{{dataList.sales}}{{$t('goodDetail.People')}}</view>
			</view>
			<view class="name_detail">
				<view class="text">{{dataList.name}}</view>
			</view>
		</view>
		<!-- 优惠卷 -->
		<view class="new_red" v-if="!!NewList">
			<view class="new_red_left">
				<image mode="widthFix" src="@/static/shop/img/index/hongbao_bg.png"></image>
				<view class="new_red_left_text">
					<view class="top">{{$t('goodDetail.Limited')}}￥{{NewList.total_money}}</view>
					<view class="bottom">{{$t('goodDetail.There')}}</view>
				</view>
			</view>
			<view class="new_red_right">
				<text @click="getRed">{{$t('goodDetail.Pick')}}</text><uni-icons type="right" color="#969696"
					size="18"></uni-icons>
			</view>
		</view>
		<!-- 优惠券弹出 -->
		<coupon ref="coupon" :NewList="NewList"></coupon>
		<!-- 商品详情 -->
		<view ref="goods_detail_title" id="message1" class="goods_detail_title">{{$t('goodDetail.Product')}}</view>
		<!-- 参数 -->
		<view class="good_detail" v-html="dataList.detail"  style=''></view>
		<!-- 商品推荐 -->
		<view ref="about_recommend" class="about_recommend">
			<view class="recommend_title">
				<view class="title_left">{{$t('goodDetail.Related')}}</view>
				<view class="title_right" @click="openPop1">
					{{$t('goodDetail.All')}} <uni-icons type="right" color="#888888" size="15"></uni-icons>
				</view>
			</view>
			<view class="recommend_list">
				<view class="list_item" v-for="item in goodList" :key="item.id">
					<image mode="heightFix" :src="item.mainimg"></image>
					<view class="item_name">{{item.name}}</view>
					<view class="item_price">
						<view>￥{{item.price}}</view>
						<view>{{item.sales}}{{$t('goodDetail.People')}}</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup class='recommend_pop' ref="popup1" type="bottom">
			<view class="pop_nav_top">
				<view class="pop_nav_left">{{$t('goodDetail.Related')}}</view>
				<view class="pop_nav_right">
					<uni-icons @click="closePop1" type="closeempty" color="#888888" size="18"></uni-icons>
				</view>
			</view>
			<view class="goods_detail">
				<goods :goodList="goodList" style="background-color: #fff;"></goods>
			</view>
		</uni-popup>
		<view class="pages_bottom_fixed">
			<view class="bottom_fixed_buycar" @click="openPurchase(false)">{{$t('goodDetail.Add')}}</view>
			<view class="bottom_fixed_immbuy" @click="openPurchase(true)">
				{{dataList.first_id==this.qianggou_cate_id?$t('goodDetail.NowBuy'):$t('goodDetail.Buy')}}</view>
		</view>
		<!-- 多规格弹窗 -->
		<uni-popup ref="purchase" type="bottom">
			<view class="purchase">
				<uni-icons type="closeempty" color="grey" class="pu-icon" @click="closePurchase"></uni-icons>
				<view class="flex" style="padding: 0 40rpx 40rpx 40rpx;">
					<view class="flex_ce pu-image">
						<image :src="seleSpecImg" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="flex_co" style="height: 200rpx;">
						<view>
							<view class="pu-price">
								￥<text>{{inventoryInfo.price}}</text>
							</view>
							<view class="flex pu-welfare" style="flex-wrap: wrap;">
								<view>{{$t('goodDetail.Inventory')}}：{{inventoryInfo.stock_num}}</view>
								<view>{{$t('goodDetail.Sales')}}：{{inventoryInfo.sales}}</view>
							</view>
							<view class="num">
								<view class="num-box" @click="numSub">-</view>
								<view style="margin: 0 10rpx;">{{num}}</view>
								<view class="num-box" @click="numAdd">+</view>
							</view>
						</view>
						<view style="color: #ddd;font-size: 26rpx;">{{$t('goodDetail.Selected')}}
							{{seleSpecStr.toString() }}</view>
					</view>
				</view>
				<view class="pu-spec">
					<view class="pu-type" v-for="(item,index) in spec" :key="item.spec_id">
						<view class="pu-type-title">{{item.spec_name}}</view>
						<view class="flex pu-type-list" style="flex-wrap: wrap;">
							<view :class="item.active == i.spec_value_id?'pu-type-active':''" v-for="i in item.clild"
								:key="i.spec_value_id" @click="specClick(item,i,index)">
								<image :src="i.image" style="width: 100rpx;height: 100rpx;"></image>
								<view style="text-align: center;">{{i.spec_value}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="pu-btn">
					<view @click="toConfirm" v-if="isPurchase">
						￥{{(inventoryInfo.price*num).toFixed(2)}}</view>
					<view @click="shoppingCart" v-else>{{$t('goodDetail.Add')}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		goodDetail,
		goodStock,
		shopGetStock,
		cartAdd,
		cartCollect,
		goodList,
		couponGetNewList,
		getSetting
	} from '@/api/api.js'
	import coupon from "@/components/shop/coupon/coupon.vue"
	import goods from '@/components/shop/goods/goods.vue'
	export default {
		components: {
			goods,
			coupon
		},
		data() {
			return {
				activeName: '',
				good_id: null,
				dataList: [],
				isTitle: false,
				isLike: false,
				isWhite: false,
				thisCurrent: 0,
				activeTitle: 0,
				titleList: [{
						id: 0,
						name: this.$t('goodDetail.Commodity')
					},
					{
						id: 1,
						name: this.$t('goodDetail.Detail')
					},
					{
						id: 2,
						name: this.$t('goodDetail.Recommend')
					}
				],
				swiperImg: [],
				activeType: 0,
				num: 1,
				// 多规格
				spec: [],
				seleSpecImg: '',
				seleSpecStr: [],
				seleSpecId: [],
				// 库存信息
				inventoryInfo: {},
				isPurchase: null,
				page: 1,
				goodList: [],
				NewList: null,
				qianggou_cate_id: null
			}
		},
		onLoad(id) {
			getSetting().then(res => {
				this.qianggou_cate_id = res.data.data.qianggou_cate_id
			})
			this.good_id = id.id
			this.getGoodsDetail(id.id)
			this.getgoodStock(id.id)
			couponGetNewList({
				token: uni.getStorageSync('token')
			}).then(res => {
				if (!!res.data.data.list) {
					this.NewList = res.data.data
				}
			})
		},
		//触底加载更多
		/* onReachBottom() {
			this.page++;
			this.getGoodsList()
		}, */
		methods: {
			// 商品收藏
			cartCollect() {
				cartCollect({
					token: uni.getStorageSync('token'),
					good_id: this.good_id,
				}).then(res => {
					this.isLike = !!res.data.data
				})
			},
			getGoodsDetail(id) {
				goodDetail({
					token: uni.getStorageSync('token'),
					good_id: id
				}).then(res => {
					this.swiperImg = res.data.data.good.images_arr
					this.dataList = res.data.data.good
					console.log(this.dataList.detail)
					if (this.dataList.collect_id == 0) {
						this.isLike = false
					} else {
						this.isLike = true
					}
					this.getGoodsList()
				})
			},
			// 推荐商品
			getGoodsList() {
				goodList({
					first_id: this.dataList.first_id,
					second_id: this.dataList.second_id,
					cate_id: this.dataList.cate_id,
					page: this.page,
					keywords: '',
					listorder: 'default'
				}).then(res => {
					if (res.statusCode == 200) {
						if (res.data.data.data.length > 0) {
							this.goodList = this.goodList.concat(res.data.data.data);
						} else {
							this.page--;
							uni.showToast({
								title: this.$t('general.There'),
								icon: "none"
							})
						}
					}
				})
			},
			// 多规格
			getgoodStock(id) {
				goodStock({
					good_id: id
				}).then(res => {
					this.spec = res.data.data.spec
					if (this.spec.length > 0) {
						this.seleSpecImg = this.spec[0].clild[0].image
						this.spec.forEach(item => {
							item.active = item.clild[0].spec_value_id
							this.seleSpecStr.push(item.clild[0].spec_value)
							this.seleSpecId.push(item.clild[0].spec_value_id)
						})
						this.shopGetStock(this.seleSpecId)
					}
				})
			},
			// 多规格点击切换
			specClick(item, i, index) {
				if (!!i.image) {
					this.seleSpecImg = i.image
				}
				item.active = i.spec_value_id
				this.seleSpecStr[index] = i.spec_value
				this.seleSpecId[index] = i.spec_value_id
				this.shopGetStock(this.seleSpecId)
				this.$forceUpdate() // 页面强制刷新
			},
			// 获取库存和id
			shopGetStock(id) {
				shopGetStock({
					good_id: this.good_id,
					spec_value_id: id.toString()
				}).then(res => {
					this.inventoryInfo = res.data.data.spec
				})
			},
			// 加入购物车
			shoppingCart() {
				cartAdd({
					token: uni.getStorageSync('token'),
					good_id: this.inventoryInfo.good_id,
					sku_id: this.inventoryInfo.sku_id,
					num: this.num
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/shop/shoppingCart/shoppingCart'
						})
					}, 600)
				})
			},
			numAdd() {
				if (this.num < this.inventoryInfo.stock_num) {
					this.num++
				} else {
					uni.showToast({
						title: this.$t('general.Maximum'),
						icon: "none"
					})
				}
			},
			numSub() {
				if (this.num > 1) {
					this.num--
				} else {
					uni.showToast({
						title: this.$t('general.Minimum'),
						icon: "none"
					})
				}
			},
			changeTitle(id) {
				this.activeTitle = id
				var h1 = this.$refs.goods_detail_title.$el.offsetTop - 90
				var h2 = this.$refs.about_recommend.$el.offsetTop - 90
				if (id == 0) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 200,
					})
				}
				if (id == 1) {
					uni.pageScrollTo({
						scrollTop: h1,
						duration: 200,
					})
				}
				if (id == 2) {
					uni.pageScrollTo({
						scrollTop: h2,
						duration: 200,
					})
				}
			},
			getRed() {
				let child = this.$refs.coupon
				child.showNew()
			},
			back() {
				uni.navigateBack()
			},
			toConfirm() {
				this.closePurchase()
				let info = {}
				info.good_id = this.inventoryInfo.good_id
				info.sku_id = this.inventoryInfo.sku_id
				info.num = this.num
				uni.navigateTo({
					url: `/pages/shop/order/confirm?info=${JSON.stringify(info)}`
				})
			},
			changeCurrent(e) {
				this.thisCurrent = e.detail.current
			},
			changeType(item) {
				this.activeType = item.spec_value_id
				this.activeName = item.spec_value
				this.swiperImg = []
				this.swiperImg.push(item.image)
			},
			openPop1() {
				this.$refs.popup1.open()
			},
			closePop1() {
				this.$refs.popup1.close()
			},
			openPurchase(blo) {
				this.$refs.purchase.open()
				this.isPurchase = blo
			},
			closePurchase() {
				this.$refs.purchase.close()
			}
			// scrollTo(){
			// 	uni.pageScrollTo({
			// 	   scrollTop: 0,
			// 	   duration: 0,
			// 	})

			// }
			//获取元素离页面顶部的距离
			// getElementScollTop() {
			//   const query = uni.createSelectorQuery()
			//   query
			//     .select('.index-con')
			//     .boundingClientRect((data) => {
			//       console.log(data, 'data')
			//       let pageScrollTop = Math.round(data.top)
			//       uni.pageScrollTo({
			//         scrollTop: pageScrollTop, //滚动的距离
			//         duration: 0, //过渡时间
			//     })
			//   })
			//     .exec()
			// },
		},
		// 获取卷曲高度
		onPageScroll(e) {
			this.scroll = e.scrollTop
			if (this.scroll >= 100) {
				this.isWhite = true
				if (this.scroll >= 300) {
					this.isTitle = true
				} else {
					this.isTitle = false
				}
			} else {
				this.isWhite = false
			}
		},

	}
</script>

<style lang="scss" scoped>
	.good_detail {
		/deep/img{
			width: 100% !important;
		}
	}
	.flex {
		display: flex;
		align-items: center;
	}

	.flex_ce {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex_co {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	::v-deep .recommend_pop .uni-popup__wrapper {
		width: 100%;
		height: 70vh;
		border-radius: 16rpx;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		background-color: #fff !important;
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		flex-direction: column !important;
		font-size: 32rpx;
		color: #333;
		font-weight: 400;

		.pop_nav_top {
			font-size: 30rpx;
			height: 105rpx;
			font-weight: bold;
			width: 100%;
			padding: 30rpx 30rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #efefef;
		}

		.goods_detail {
			width: 100%;
			height: calc(100% - 105rpx);
			overflow: auto;
			padding: 20rpx 0;
		}
	}

	.pages {
		background-color: #f5f5f9;
	}

	.active_top_nav {
		background-color: #fff;
	}

	.top_nav {
		width: 100%;
		padding: 0 20rpx;
		// position: fixed;
		// z-index: 99;
		// top: 0;
		// left: 0;
		// right: 0;

		.nav_title {
			display: flex;
			justify-content: space-between;
			padding: 15rpx 0;

			.left {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.8);
			}
		}

		.nav_types {
			display: flex;
			justify-content: space-around;

			.types_item {
				font-weight: bold;
				padding: 10rpx 0;
			}

			.active_types_item {
				border-bottom: 5rpx solid #16a5af;
			}
		}
	}

	.photos {
		position: relative;

		swiper {
			width: 100%;
			height: 750rpx;

			.swiper_item {
				width: 100%;
				height: 750rpx;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				overflow: inherit;
			}
		}

		.description {
			position: absolute;
			font-size: 24rpx;
			color: #666666;
			left: 50%;
			transform: translateX(-50%);
		}

		.photo_bottom {
			width: 100%;
			height: 60rpx;
			padding-top: 20rpx;
			background: linear-gradient(#fff, #f5f5f9);

			.photo_numbers {
				position: absolute;
				z-index: 6;
				right: 30rpx;
				font-size: 20rpx;
				padding: 0rpx 10rpx;
				background-color: #fff;
				border-radius: 8rpx;
				color: #a3a3a3;

			}

		}

		.goods_type {
			width: 96%;
			margin: 0 auto;
			padding-left: 20rpx;
			padding-bottom: 10rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			overflow-x: auto;

			.out_type {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-right: 15rpx;
				padding-top: 10rpx;

				.name {
					display: flex;
					justify-content: center;
					margin-top: 5rpx;
					font-size: 24rpx;
				}
			}

			.goods_type_item {
				flex-shrink: 0;
				width: 90rpx;
				height: 90rpx;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					height: 70rpx;
				}
			}

			.active_type_item {
				border: 1rpx solid #333;
			}

		}

		.goods_type:last-child {
			margin-bottom: 10rpx;
		}

	}

	.message_content {
		width: 96%;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 5rpx;

		.price_detail {

			display: flex;
			padding: 0 15rpx;
			margin-bottom: 20rpx;
			align-items: center;
			justify-content: space-between;

			.left {
				font-weight: bold;
				font-size: 35rpx;
			}

			.right {
				font-size: 24rpx;
				color: #a3a3a3;
			}
		}

		.name_detail {
			.text {
				padding: 0 15rpx;
			}
		}
	}

	.new_red {
		width: 96%;
		padding: 20rpx 20rpx;
		margin: 10rpx auto;
		background-color: #fff;
		border-radius: 5rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.new_red_left {
			display: flex;
			font-size: 24rpx;
			display: flex;
			align-items: center;

			image {
				width: 60rpx;
				margin: 0 20rpx;
			}

			.new_red_left_text {
				.bottom {
					color: #a3a3a3;
				}
			}
		}

		.new_red_right {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #969696;
		}
	}

	.resent_buy {
		width: 96%;
		padding: 20rpx 20rpx;
		margin: 10rpx auto;
		background-color: #fff;
		border-radius: 5rpx;

		.title_left {
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.buy_list {
			.list_item {
				display: flex;
				margin: 5rpx 0;
				justify-content: space-between;
				font-size: 24rpx;

				.person {
					display: flex;
					align-items: center;
					color: #5f5f5f;

					image {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						margin-right: 10rpx;
					}
				}

				.type {
					color: #5f5f5f;
				}

				.item_price {
					color: #5f5f5f;
				}

				.item_time {
					color: #969696;
				}
			}
		}
	}

	.goods_detail_title {
		width: 96%;
		padding: 10rpx 20rpx;
		margin: 10rpx auto 0;
		border-radius: 5rpx;
		font-weight: bold;
		background-color: #fff;
	}

	.good_detail {
		width: 96%;
		padding: 10rpx 20rpx;
		margin: 0 auto;
		border-radius: 5rpx;
		background-color: #fff;

		.detail_item {
			width: 100%;
			display: flex;
			font-size: 24rpx;
			margin-bottom: 8rpx;
			justify-content: space-between;

			.detail_item_title {
				width: 30%;
				display: flex;
				align-items: center;
				padding: 15rpx 20px;
				background-color: #fff;
			}

			.detail_item_value {
				width: 69%;
				padding: 15rpx 20px;
				background-color: #fff;
			}
		}
	}

	.goods_detail_img {
		image {
			width: 100%;
		}
	}

	.about_recommend {
		width: 96%;
		padding: 20rpx 20rpx;
		padding-bottom: 130rpx;
		margin: 10rpx auto;
		background-color: #fff;
		border-radius: 5rpx;

		.recommend_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;

			.title_left {
				font-weight: bold;

			}

			.title_right {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #747474;
			}
		}

		.recommend_list {
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			align-items: center;
			padding: 0 8%;

			.list_item {
				width: 40%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				margin-top: 20rpx;

				image {
					height: 220rpx;
				}

				.item_name {
					width: 100%;
					color: #5f5f5f;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.item_price {
					width: 100%;
					margin-top: 10rpx;
					font-weight: bold;
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}

	.pages_bottom_fixed {
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;

		.bottom_fixed_buycar {
			width: 25%;
			height: 60%;
			display: flex;
			font-size: 28rpx;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #dddddd;
			color: #838383;
		}

		.bottom_fixed_immbuy {
			width: 70%;
			height: 60%;
			display: flex;
			justify-content: center;
			align-items: center;
			// border: 1rpx solid #333;
			color: #fff;
			background-color: #00cbcc;
		}
	}

	.purchase {
		background-color: #fff;
		padding: 40rpx 0 0;
		position: relative;

		.pu-icon {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.pu-image {
			width: 200rpx;
			height: 200rpx;
			border: #F4F3F8 1px solid;
			flex-shrink: 0;
			margin-right: 30rpx;
		}

		.pu-price {
			font-weight: bold;

			&>text {
				font-size: 44rpx;
			}
		}

		.pu-welfare {
			&>view {
				border: gray 1px solid;
				font-size: 26rpx;
				padding: 0 10rpx;
				margin-right: 10rpx;
			}
		}

		.num {
			display: flex;
			align-items: center;
			margin-top: 10rpx;

			.num-box {
				background-color: #eee;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.pu-spec {
			background-color: #FAFAFC;
			padding: 0 40rpx;
			height: 500rpx;
			overflow: auto;
		}

		.pu-type {
			.pu-type-title {
				height: 80rpx;
				line-height: 80rpx;
			}

			.pu-type-list {
				&>view {
					background-color: #fff;
					padding: 10rpx 30rpx;
					margin: 0 20rpx 10rpx 0;
					border-radius: 5rpx;
				}

				.pu-type-active {
					border: 2px solid #000;
					box-sizing: border-box;
				}
			}
		}

		.pu-btn {
			padding: 20rpx;

			&>view {
				background-color: #00C2C2;
				width: 100%;
				height: 120rpx;
				color: #fff;
				border-radius: 5rpx;
				text-align: center;
				line-height: 120rpx;
				font-size: 44rpx;
			}
		}
	}
</style>